<html>
  <head>
    <title>
      流动的字符
    </title>
    <style>
      html,body{
        width: 100%;
        height: 100%;
        border:0;
        padding: 0;
        margin: 0;
        overflow: hidden;
        background-color: black;
      }
      canvas{
        /* width: 100%;
        height: 100%; */
        border:0;
      }
    </style>
  </head>
  <body>
    <canvas id="container" width="200" height="200"></canvas>
    <script>
      var container = document.getElementById("container")
      var width = document.body.clientWidth
      var height = document.body.clientHeight
      var itemWidth = 9;
      var itemHeight = 9;
      container.height = height
      container.width = width
      var ctx=container.getContext("2d");
      var colorArr = ["#845EC2","#D65DB1","#FF6F91","#FF9671","#FFC75F","#F9F871"]
      var codeArr = "anqwertyuioplkjhgdsazxcvbnnmQWERTYUIOPLKJHGFDSAZXCVBNM1234567890"
      var drawWidthData=[]
      for(var i=0;i<(width+100)/itemWidth;i++){
          drawWidthData.push(0)
      }
      setInterval(() => {
        drawMy()
      }, 30);

      function drawMy(){
        for(var j = 0;j<drawWidthData.length;j++){
          ctx.fillStyle=colorArr[Math.round(Math.random()*100)%colorArr.length];
          ctx.font=itemHeight+"px 微软雅黑";
          ctx.fillText(codeArr[Math.round(Math.random()*100)%codeArr.length],itemWidth*j,itemHeight*drawWidthData[j]);
          ctx.fillStyle="rgba(0,0,0,0.1)"
          ctx.fillRect(itemWidth*j,0,itemWidth,itemHeight*drawWidthData[j]+itemHeight);
          drawWidthData[j]++;
          if(drawWidthData[j]>Math.round(Math.random()*1000)+(height+100)/itemHeight){
            drawWidthData[j]=0
          }
        }
      }
      
    </script>
  </body>
</html>